<template>
  <el-dialog :title="dialogTitle" v-model="dialogVisible" width="50%">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="服务地址" prop="host">
        <el-input v-model="form.host" placeholder="请输入服务地址"></el-input>
      </el-form-item>
      <el-form-item label="用途" prop="use">
        <el-input v-model="form.use" placeholder="请输入用途"></el-input>
      </el-form-item>
      <el-form-item label="CPU情况" prop="cpu">
        <el-input v-model="form.cpu" placeholder="请输入CPU情况"></el-input>
      </el-form-item>
      <el-form-item label="内存情况" prop="memory">
        <el-input v-model="form.memory" placeholder="请输入内存情况"></el-input>
      </el-form-item>
      <el-form-item label="当前状态" prop="status">
        <el-input v-model="form.status" placeholder="请输入当前状态"></el-input>
      </el-form-item>
      <el-form-item label="硬盘情况" prop="hardDisk">
        <el-input v-model="form.hardDisk" placeholder="请输入硬盘情况"></el-input>
      </el-form-item>
      <el-form-item label="操作系统" prop="operaSys">
        <el-input v-model="form.operaSys" placeholder="请输入操作系统"></el-input>
      </el-form-item>
      <el-form-item label="GPU个数" prop="gpu">
        <el-input v-model="form.gpu" placeholder="请输入GPU个数"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确定</el-button>
        <el-button @click="handleClose()">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { addResourceNodes, modifyResourceNodes } from '@/services/modules/base-config'
const form = reactive({
  id: undefined,
  host: undefined,
  use: undefined,
  cpu: undefined,
  memory: undefined,
  status: undefined,
  hardDisk: undefined,
  operaSys: undefined,
  gpu: undefined
})
const dialogVisible = ref(false)
const rules = reactive({
  host: [{ required: true, message: '请输入服务地址', trigger: 'blur' }],
  use: [{ required: true, message: '请输入用途', trigger: 'blur' }]
})
const dialogTitle = ref('')
const formRef = ref(null)
const emit = defineEmits(['handleGetList'])
const handleOpenDialog = (row) => {
  dialogVisible.value = true
  if (formRef.value) {
    formRef.value.resetFields()
  }
  if (row.id) {
    dialogTitle.value = '修改节点信息'
    Object.keys(form).forEach((key) => {
      form[key] = row[key]
    })
  } else {
    dialogTitle.value = '添加节点信息'
    Object.keys(form).forEach((key) => {
      form[key] = undefined
    })
  }
}
const handleSubmit = async () => {
  await formRef.value.validate((valid) => {
    if (valid) {
      if (!form.id) {
        addResourceNodes(form).then((res) => {
          if (res.code === 200) {
            emit('handleGetList')
            handleClose()
          }
        })
      } else {
        modifyResourceNodes(form).then((res) => {
          if (res.code === 200) {
            emit('handleGetList')
            handleClose()
          }
        })
      }
    } else {
      ElMessage.error('请填写完整信息')
    }
  })
}
const handleClose = () => {
  dialogVisible.value = false
}
defineExpose({ handleOpenDialog })
</script>
